<template>
	<div class="ui-picture-cells">
		<div class="ui-picture-cell" v-for="(item, index) in value">
			<div class="upload-btn">
				<ImageUpload v-model="item.image"></ImageUpload>
			</div>
			<div class="config" :class="{'notitle': notitle}">
				<Form :label-width="38">
					<FormItem label="标题">
			            <Input v-model="item.title" :placeholder="placeholder"></Input>
			        </FormItem>
			        <FormItem label="链接">
			            <Input v-model="item.link">
			            	<span slot="prepend">http://</span>
			            	<span slot="append" style="cursor: pointer; display: block; margin: -4px -7px; padding: 0 5px; line-height: 30px;">选择链接</span>
			            </Input>
			        </FormItem>
				</Form>
			</div>
			<div v-if="add" class="remove" @click="handleRemove(index)"><Icon type="ios-close-circle" color="#1ba2fc" :size="16" /></div>
		</div>
		<Button v-if="add" @click="handleAdd" long icon="md-add" class="add-btn">添加一个图片</Button>
	</div>
</template>

<script>
import ImageUpload from './ImageUpload.vue';
export default {
	name: 'pictureUploads',
	components: {
		ImageUpload
	},
	props: {
		value: Array,
		placeholder: {
			type: String,
			default: '填写标题'
		},
		notitle: {
			type: Boolean,
			default: false
		},
		add: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			
		}
	},
	methods: {
		handleAdd() {
			console.log(this.value)
			this.value.push({title: '', image: '', link: ''});
		},
		handleRemove(index) {
			this.value.splice(index, 1);
		}
	}
}
</script>

<style>
</style>